/*全局样式重置*/
* {
  margin: 0;/*清除所有元素默认的外边距 (margin)*/
  padding: 0;/*清除所有元素默认的内边距 (padding)*/
  box-sizing: border-box;/*使用 box-sizing: border-box 让元素的宽度和高度包含边框和内边距，方便布局计算*/
}


/*页面主体样式*/
body {
  background: #f0f0f0; /* 浅灰色背景 */
  font-family: "楷体", sans-serif; /* 默认字体为楷体 */
}


/*标题样式*/
h1 {
  text-align: center; /* 文字居中 */
  padding: 30px 0; /* 上下内边距30px */
  background: #e0e0e0; /* 稍深一点的灰色背景 */
  color: #333; /* 深灰色文字 */
}


/*输入区域样式*/
.input-area {
  width: 80%; /* 宽度为父容器的80% */
  max-width: 600px; /* 最大宽度600px */
  margin: 20px auto; /* 上下外边距20px，左右居中 */
  display: flex; /* 使用flex布局（Flex 布局，即 Flexible Box 弹性盒子布局，是一种用于在网页上创建灵活且响应式布局的 CSS 模式。它可以轻松地控制元素在容器内的排列方式、对齐方式以及分配空间。） */
  justify-content: space-between; /* 元素间留白（justify-content: space-between翻译为“证明内容：之间有空格”） */
  align-items: center; /* 垂直居中对齐（align是指对齐，items指项目） */
}

.input-area input {
  flex: 1; /* 占满剩余空间（让这个 input 元素在 Flex 容器里 “尽可能地伸缩”，去填充可用的空间，同时也能在空间不足时缩小，保证布局的合理性。） */
}
